<template>
	<view class="container">
		<!-- Top scanning section -->
		<view class="top-section">
			<view class="scan-section">
				<view class="scan-title">扫描托盘</view>
				<view class="s-input-box flex-row-between s-w">
					<input auto-focus="true"  v-model="scanCode" @confirm="handleScan" class="s-input scan-input flex1"
						placeholder="请输入或扫描托盘号" />
					<image v-if="scanCode" class="s-input-icon clear-icon" src="/static/images/clear.png" @click="clearScanCode"></image>

					<image class="s-input-icon s-i" src="/static/images/scan.png"></image>
				</view>
			</view>

			<!-- Order info section -->
			<view class="info-section" v-if="(erpOutBillNo || trayNo) && splitBillNo">
				<view class="info-item">
					<text class="info-label">订单号：</text>
					<text class="info-value">{{ erpOutBillNo }}</text>
				</view>
				<view class="info-item">
					<text class="info-label">托盘号：</text>
					<text class="info-value">{{ trayNo }}</text>
				</view>
			</view>
		</view>

		<!-- Materials list -->
		<scroll-view scroll-y class="materials-list" v-if="materials.length">
			<view class="material-card" v-for="(item, index) in materials" :key="index">
				<view class="material-content">
          <view class="material-row">
            <text class="label">订单号</text>
            <text class="value">{{ item.remark }}</text>
          </view>
          <view class="material-row">
            <text class="label">仓库</text>
            <text class="value">{{ item.address }}</text>
          </view>
          <view class="material-row">
						<text class="label">物料编号</text>
						<text class="value">{{ item.productNo }}</text>
					</view>
					<view class="material-row">
						<text class="label">物料名称</text>
						<text class="value">{{ item.productName }}</text>
					</view>
					<view class="material-row">
						<text class="label">物料批号</text>
						<text class="value">{{ item.batchNo }}</text>
					</view>
					<view class="material-row">
						<text class="label">需求数量</text>
						<text class="value">{{ item.qty }}</text>
					</view>

					<view class="material-row">
						<text class="label">单位</text>
						<text class="value">{{ item.productUnit }}</text>
					</view>
					<view class="card-scan-section">
						<view class="s-input-box flex-row-between s-w">
							<input v-model="item.newTrayCode" class="s-input scan-input flex1"
								placeholder="请输入或扫描新托盘码" />
							<image v-if="item.newTrayCode" class="s-input-icon clear-icon" src="/static/images/clear.png" @click="clearCardTrayCode(index)"></image>
							<image class="s-input-icon s-i" src="/static/images/scan.png"></image>
						</view>
						<view class="card-submit-btn" @click="handleCardSubmit(index)">
							<text>提 交</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="nodata-label" v-else>
			<text class="label">暂无托盘信息</text>
		</view>
	</view>
</template>

<script>
	import {
		getSplitBill,
		getSplitBillDetailList,
		executeSplit,
		getSplitBillDetailsByTray
	} from "./api"
	import { defaultPageConfig} from "@/const/index"
	import { validateTrayCode} from "@/utils/common.js"
	export default {
		data() {
			return {
				scanCode: '',
				erpOutBillNo: '',
				splitBillNo: '',
				trayNo: '',
				materials: []
			};
		},
		methods: {
			handleScan() {
				if (!validateTrayCode(this.scanCode)) {
					this.$modal.msg("请输入正确托盘号")
					return
				}
				this.getDetail()

			},
			getDetail() {
				this.$modal.loading("处理中...")
				getSplitBillDetailsByTray({
					billType: 6,
					trayNo: this.scanCode,
					pageNum:1,
					pageSize: 999
				}).then(res => {
					this.$modal.closeLoading()
					if (res.code == 200) {
						this.materials = res.data.map( el=>{
							return{
								...el.detai1s[0],
								billNo: el.billNo
							}
						})
					} else {
						this.initialize();
						res.msg && this.$modal.confirmClose(res.msg)
					}
				})

			},
			handleCardSubmit(index) {
				const item = this.materials[index];
				if (!validateTrayCode(item.newTrayCode)) {
					this.$modal.msg("请输入正确新托盘号")
					return
				}
				let row = this.materials[index]
				this.$modal.confirm('确定提交？').then(() => {
					this.handleSubmit(item.newTrayCode,row)
				})
			},
			handleSubmit(newTrayCode,row) {
				let obj = {
					trayNo: this.scanCode,
					newTrayNo: newTrayCode,
					billType: 6,
					isReverseSide:"N",
					orderNo:row.orderNo,
					billNo: row.billNo
				};
				// this.$modal.confirm('确定提交？').then(() => {
					this.$modal.loading("加载中...")
					executeSplit(obj).then(res => {
						this.$modal.closeLoading()
						if (res.code == 200) {
							this.$modal.msgSuccess("操作成功");
							// 刷新列表
							this.getDetail();
							// 检查是否所有卡片都已处理
							this.checkAllCardsProcessed();
						} else {
							res.msg && this.$modal.confirmClose(res.msg)
						}
					// })
				})
			},
			checkAllCardsProcessed() {
				// 检查是否所有卡片都已处理
				const allProcessed = this.materials.every(item => item.newTrayCode);
				if (allProcessed) {
					this.initialize();
				}
			},
			initialize() {
				this.trayNo = '';
				this.erpOutBillNo = '';
				this.splitBillNo = '';
				this.materials = [];
				this.scanCode = ''; // 清空顶部扫描码
			},
			clearScanCode() {
				this.scanCode = '';
				this.initialize();
			},
			clearCardTrayCode(index) {
				this.materials[index].newTrayCode = '';
			}
		}
	}
</script>

<style lang="scss">
	.container {
		min-height: 100vh;
		background-color: #F0F2F5;
		position: relative;
		padding-bottom: 240rpx; // 为固定底部区域留出空间

		.top-section {
			padding: 30rpx 20rpx;
			background: linear-gradient(180deg, #99cfd6 0%, #4599ad 100%) !important;
		}

		.scan-section {
			background-color: #FFFFFF;
			padding: 24rpx;
			border-radius: 16rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
			margin-bottom: 20rpx;

			.scan-title {
				font-size: 28rpx;
				color: #333;
				margin-bottom: 16rpx;
				font-weight: 500;
			}
		}

		.scan-input {
			background-color: #F8F9FA;
			height: 80rpx;
			padding: 0 24rpx;
			border-radius: 8rpx;
			font-size: 28rpx;
			border: 2rpx solid #E5E6EB;

			&::placeholder {
				color: #C9CDD4;
			}
		}

		.info-section {
			background-color: #FFFFFF;
			padding: 24rpx;
			border-radius: 16rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

			.info-item {
				display: flex;
				align-items: center;
				margin-bottom: 16rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.info-label {
					font-size: 28rpx;
					color: #666;
					width: 120rpx;
				}

				.info-value {
					font-size: 28rpx;
					color: #333;
					font-weight: 500;
				}
			}
		}

		.materials-list {
			padding: 20rpx;
			max-height: calc(100vh - 400rpx);

			.material-card {
				background-color: #FFFFFF;
				border-radius: 16rpx;
				margin-bottom: 20rpx;
				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
				overflow: hidden;

				.material-content {
					padding: 24rpx;
				}

				.material-row {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 16rpx;
					font-size: 28rpx;

					&:last-child {
						margin-bottom: 0;
					}

					.label {
						color: #666;
					}

					.value {
						color: #333;
						font-weight: 500;
						text-align: right;
					}
				}

				.card-scan-section {
					margin-top: 20rpx;
					padding-top: 20rpx;
					border-top: 2rpx solid #E5E6EB;

					.card-submit-btn {
						margin-top: 16rpx;
						height: 80rpx;
						line-height: 80rpx;
						background: #4599ad;
						color: #FFFFFF;
						border-radius: 8rpx;
						font-size: 28rpx;
						text-align: center;
						font-weight: 500;
						box-shadow: 0 4rpx 12rpx rgba(46, 92, 254, 0.3);
						display: flex;
						justify-content: center;

						&:active {
							transform: scale(0.98);
						}

						// &:disabled {
						// 	background: #CCCCCC;
						// 	box-shadow: none;
						// }
					}
				}
			}
		}

		.nodata-label {
			text-align: center;
			margin-top: 40rpx;
			color: #999999;
		}
		.s-input-box {
				position: relative;
				display: flex;
				align-items: center;

				.s-input {
					padding-right: 80rpx; // 为右侧图标留出空间
				}

				.s-input-icon {
					position: absolute;
					width: 32rpx;
					height: 32rpx;
					right: 24rpx;
					z-index: 1;

					&.clear-icon {
						right: 70rpx; // 清除图标位置
					}

					&.s-i {
						right: 24rpx; // 扫描图标位置
					}
				}
			}
		}
</style>
